import 'package:flutter/material.dart';
import 'package:flutter_shop/pages/cart/index.dart';
import 'package:flutter_shop/pages/category/index.dart';
import 'package:flutter_shop/pages/home/index.dart';
import 'package:flutter_shop/pages/mine/index.dart';

class TabBarPage extends StatefulWidget {
  const TabBarPage({super.key});

  @override
  // ignore: library_private_types_in_public_api
  _TabBarPageState createState() => _TabBarPageState();
}

class _TabBarPageState extends State<TabBarPage> {
  // 定义tabList数据
  List tabList = [
    {
      'label': '首页',
      'activeIcon': 'assets/tabbar/home-active.png',
      'icon': 'assets/tabbar/home.png',
    },
    {
      'label': '分类',
      'activeIcon': 'assets/tabbar/cate-active.png',
      'icon': 'assets/tabbar/cate.png',
    },
    {
      'label': '购物车',
      'activeIcon': 'assets/tabbar/cart-active.png',
      'icon': 'assets/tabbar/cart.png',
    },
    {
      'label': '我的',
      'activeIcon': 'assets/tabbar/user-active.png',
      'icon': 'assets/tabbar/user.png',
    }
  ];
  
  int currentIndex = 0;
  
  Widget _getTabBarComp(){
    if(currentIndex == 0){
      return const Text('首页');
    }else if(currentIndex == 1){
      return const Text('分类');
    }else if(currentIndex == 2){
      return const Text('购物车');
    }else{
      return const Text('我的');
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          "Flutter的Tabs案例",
        ),
        backgroundColor: Colors.blue,
        foregroundColor: Colors.white,
      ),
      // 底部导航栏
      body: IndexedStack(
        index: currentIndex,
        children: const [
          HomePage(),
          CategoryPage(),
          CartPage(),
          MinePage(),
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        items: tabList.map((item) {
          return BottomNavigationBarItem(
            label: item["label"],
            icon: Image.asset(
              item["icon"],
              width: 40,
              height: 40,
            ),
            activeIcon: Image.asset(
              item["activeIcon"],
              width: 40,
              height: 40,
            ),
          );
        }).toList(),
        currentIndex: currentIndex,
        selectedItemColor: Colors.grey,
        onTap: (index) {
          setState(() {
            currentIndex = index;
          });
        },
      ),
    );
  }
}
